@charset 'UTF-8';
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS and IE text size adjust after device orientation change,
 *    without disabling user zoom.
 */
html
{
    font-family: sans-serif;
    /* 1 */

        -ms-text-size-adjust: 100%;
    /* 2 */
    -webkit-text-size-adjust: 100%;
    /* 2 */
}

/**
 * Remove default margin.
 */
body
{
    margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary
{
    display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video
{
    display: inline-block;
    /* 1 */

    vertical-align: baseline;
    /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls])
{
    display: none;

    height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
 */
[hidden],
template
{
    display: none;
}

/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a
{
    background-color: transparent;
}

/**
 * Improve readability of focused elements when they are also in an
 * active/hover state.
 */
a:active,
a:hover
{
    outline: 0;
}

/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title]
{
    border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong
{
    font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */
dfn
{
    font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1
{
    font-size: 2em;

    margin: .67em 0;
}

/**
 * Address styling not present in IE 8/9.
 */
mark
{
    color: #000; 
    background: #ff0;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */
small
{
    font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup
{
    font-size: 75%;
    line-height: 0;

    position: relative;

    vertical-align: baseline;
}

sup
{
    top: -.5em;
}

sub
{
    bottom: -.25em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img
{
    border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root)
{
    overflow: hidden;
}

/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure
{
    margin: 1em 40px;
}

/**
 * Address differences between Firefox and other browsers.
 */
hr
{
    box-sizing: content-box;
    height: 0;
}

/**
 * Contain overflow in all browsers.
 */
pre
{
    overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp
{
    font-family: monospace, monospace;
    font-size: 1em;
}

/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea
{
    /* 1 */
    font: inherit;
    /* 2 */

    margin: 0;

    color: inherit;
    /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button
{
    overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select
{
    text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type='button'],
input[type='reset'],
input[type='submit']
{
    /* 2 */
    cursor: pointer;

    -webkit-appearance: button;
    /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled]
{
    cursor: default;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner
{
    padding: 0; 

    border: 0;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input
{
    line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type='checkbox'],
input[type='radio']
{
    box-sizing: border-box;
    /* 1 */
    padding: 0;
    /* 2 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button
{
    height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
 */
input[type='search']
{
    /* 1 */
    box-sizing: content-box;

    -webkit-appearance: textfield;
    /* 2 */
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-decoration
{
    -webkit-appearance: none;
}

/**
 * Define consistent border, margin, and padding.
 */
fieldset
{
    margin: 0 2px;
    padding: .35em .625em .75em; 

    border: 1px solid #c0c0c0;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend
{
    /* 1 */
    padding: 0;

    border: 0;
    /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea
{
    overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup
{
    font-weight: bold;
}

/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table
{
    border-spacing: 0; 
    border-collapse: collapse;
}

td,
th
{
    padding: 0;
}

/*
参考 _sprite.scss  的代码
*/
/*
在css中，直接@include即可
例:
.icon-search{
    @include use-sprite($icon-search,$normal,$retina)
}
*/
/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+bash+css-extras+git+handlebars+http+makefile+markdown+nginx+php+sass+scss&plugins=line-highlight+line-numbers+autolinker+file-highlight+show-language */
/**
 * prism.js default theme for JavaScript, CSS and HTML
 * Based on dabblet (http://dabblet.com)
 * @author Lea Verou
 */
code[class*='language-'],
pre[class*='language-']
{
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    line-height: 1.5;

    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-wrap: normal;
    word-break: normal;
    -moz-tab-size: 4;
      -o-tab-size: 4;
         tab-size: 4;
    -webkit-hyphens: none;
       -moz-hyphens: none;
            hyphens: none; 

    color: black;
    text-shadow: 0 1px white;

    direction: ltr;
        -ms-hyphens: none;
}

pre[class*='language-']::-moz-selection,
pre[class*='language-'] ::-moz-selection,
code[class*='language-']::-moz-selection,
code[class*='language-'] ::-moz-selection
{
    background: #b3d4fc; 
    text-shadow: none;
}

pre[class*='language-']::selection,
pre[class*='language-'] ::selection,
code[class*='language-']::selection,
code[class*='language-'] ::selection
{
    background: #b3d4fc; 
    text-shadow: none;
}

@media print
{
    code[class*='language-'],
    pre[class*='language-']
    {
        text-shadow: none;
    }
}

/* Code blocks */
pre[class*='language-']
{
    overflow: auto; 

    margin: .5em 0;
    padding: 1em;
}

:not(pre) > code[class*='language-'],
pre[class*='language-']
{
    background: #f5f2f0;
}

/* Inline code */
:not(pre) > code[class*='language-']
{
    padding: .1em;

    white-space: normal; 

    border-radius: .3em;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata
{
    color: slategray;
}

.token.punctuation
{
    color: #999;
}

.namespace
{
    opacity: .7;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted
{
    color: #905;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted
{
    color: #690;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string
{
    color: #a67f59;
    background: rgba(255, 255, 255, .5);
}

.token.atrule,
.token.attr-value,
.token.keyword
{
    color: #07a;
}

.token.function
{
    color: #dd4a68;
}

.token.regex,
.token.important,
.token.variable
{
    color: #e90;
}

.token.important,
.token.bold
{
    font-weight: bold;
}

.token.italic
{
    font-style: italic;
}

.token.entity
{
    cursor: help;
}

pre[data-line]
{
    position: relative;

    padding: 1em 0 1em 3em;
}

.line-highlight
{
    line-height: inherit;

    position: absolute;
    right: 0;
    left: 0;

    margin-top: 1em;
    padding: inherit 0;

    white-space: pre; 
    pointer-events: none;
    /* Same as .prism’s padding-top */

    background: rgba(153, 122, 102, .08);
    background:    -moz-linear-gradient(left, rgba(153, 122, 102, .1) 70%, rgba(153, 122, 102, 0));
    background: -webkit-linear-gradient(left, rgba(153, 122, 102, .1) 70%, rgba(153, 122, 102, 0));
    background:      -o-linear-gradient(left, rgba(153, 122, 102, .1) 70%, rgba(153, 122, 102, 0));
    background:         linear-gradient(left, rgba(153, 122, 102, .1) 70%, rgba(153, 122, 102, 0));
}

.line-highlight:before,
.line-highlight[data-end]:after
{
    font: bold 65%/1.5 sans-serif;

    position: absolute;
    top: .4em;
    left: .6em;

    min-width: 1em;
    padding: 0 .5em;

    content: attr(data-start);
    text-align: center;
    vertical-align: .3em;

    color: #f5f2f0;
    border-radius: 999px;
    background-color: rgba(153, 122, 102, .4);
    box-shadow: 0 1px white; 
    text-shadow: none;
}

.line-highlight[data-end]:after
{
    top: auto;
    bottom: .4em; 

    content: attr(data-end);
}

pre.line-numbers
{
    position: relative;

    padding-left: 3.8em;

    counter-reset: linenumber;
}

pre.line-numbers > code
{
    position: relative;
}

.line-numbers .line-numbers-rows
{
    font-size: 100%;

    position: absolute;
    top: 0;
    left: -3.8em;

    width: 3em;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none; 
    /* works for line-numbers below 1000 lines */
    letter-spacing: -1px;
    pointer-events: none;

    border-right: 1px solid #999;
}

.line-numbers-rows > span
{
    display: block;

    counter-increment: linenumber; 
    pointer-events: none;
}

.line-numbers-rows > span:before
{
    display: block;

    padding-right: .8em;

    content: counter(linenumber);
    text-align: right; 

    color: #999;
}

.token a
{
    color: inherit;
}

div.prism-show-language
{
    position: relative;
}

div.prism-show-language > div.prism-show-language-label[data-language]
{
    font-size: .9em;

    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: auto;
    left: auto;

    display: inline-block;

    width: auto;
    height: auto;
    padding: 0 .5em;

    -webkit-transform: none;
       -moz-transform: none;
        -ms-transform: none;
         -o-transform: none;
            transform: none; 

    color: black;
    border-radius: 0 0 0 5px;
    background-color: #cfcfcf;
    -webkit-box-shadow: none;
       -moz-box-shadow: none;
            box-shadow: none;
    text-shadow: none;
}

body,
html
{
    position: relative; 

    width: 100%;
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}

html
{
    font-family: 'Exo', '-apple-system', 'Open Sans', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 'Hiragino Sans GB', 'Microsoft YaHei', Helvetica, Arial, sans-serif; 
    font-size: 62.5%;

    max-height: 100%;

    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

a
{
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6
{
    margin: 0;
    padding: 0;
}

h6
{
    font-size: 1.4rem;
}

h5
{
    font-size: 1.6rem;
}

h4
{
    font-size: 1.8rem;
}

h3
{
    font-size: 2.2rem;
    line-height: 2.6rem;
}

h2
{
    font-size: 2.8rem;
    line-height: 4.6rem;

    margin-bottom: .5rem;
}

h1
{
    font-size: 3.2rem;
    line-height: 3.8rem;

    margin-bottom: .5rem;
}

.clearfix:before,
.clearfix:after
{
    display: table; 

    content: ' ';
}

.clearfix:after
{
    clear: both;
}

.clearfix
{
    *zoom: 1;
}

.hide
{
    display: none;
}

.site-wrapper
{
    position: relative;

    height: 100%;
    max-height: 100%;
}

#header
{
    position: relative;
    z-index: 0; 

    display: table;

    box-sizing: border-box;
    width: 100%;
    height: 60%;
    max-height: 52rem;
    padding: 2rem 0;

    text-align: center;
}

#footer
{
    position: relative;
    z-index: 1; 

    display: table;

    width: 100%;
    height: 30rem;
    margin-top: 12rem;
}

.site-footer
{
    font-family: 'Exo', sans-serif;
    font-size: 1.2rem;
    font-weight: lighter;
    line-height: 1.45em;

    position: relative;

    margin: 8rem 0 0 0;
    padding: 1.5rem;

    text-align: center; 

    color: #666665;
    border-top: #ebf2f6 1px solid;
}
.site-footer a
{
    font-family: 'Exo', sans-serif;

    color: #666665;
}
.site-footer a:hover
{
    color: #50585d;
}
.site-footer .github-repo
{
    line-height: 12px; 

    position: relative;

    display: inline-block;

    height: 12px;
    padding: 2px 5px 2px 4px;

    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    text-indent: 14px;

    color: #333;
    border: 1px solid #d4d4d4;
    border-radius: 3px;
    background-color: #fafafa;
    text-shadow: 0 1px 0 #fff;
}
.site-footer .github-repo:hover,
.site-footer .github-repo:active
{
    color: #fff; 
    background-color: #ddd;
}
.site-footer .gadget-github
{
    position: absolute;
    top: 2px;
    left: 4px;

    display: block;

    width: 12px;
    height: 12px;
    margin-right: 4px;

    background-image: url();
    background-repeat: no-repeat; 
    background-size: 100% 100%;
}
.site-footer .github-repo
{
    display: inline-block;
}

.post-template .site-footer
{
    margin-top: 5rem;
}

.wechat-only
{
    font-size: 0;

    display: block; 

    width: 0;
    height: 0;
}

.home-template #main,
.archive-template #main
{
    max-width: 76.8rem;
}

.post-template #main
{
    max-width: 76.8rem;
}

.blog-background
{
    background-repeat: no-repeat;
    background-position: center;
    -webkit-background-size: cover;
            background-size: cover;
}

.banner-mask:after
{
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    content: '';
    transition: background-color 500ms ease-out 2s;
    -webkit-animation-name: animate-bg;
    -webkit-animation-duration: 20s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite; 

    opacity: .25;
    background: url('../../assets/images/escheresque_ste.png');
    background-color: rgba(0, 0, 0, .05);
}

.arrow_down
{
    position: absolute;
    bottom: 5rem;
    left: 50%;

    display: none;

    height: 2rem;
}
.arrow_down a
{
    position: absolute;
    z-index: 4;
    left: 50%;

    display: block;

    width: 2.8rem;
    height: 2.8rem;
    margin-left: -1.3rem;

    -webkit-transform: rotate(315deg);
            transform: rotate(315deg);
    -webkit-animation-name: shine;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite; 

    border-bottom: .1rem solid #fff;
    border-left: .1rem solid #fff;
}

.home-template #main,
.archive-template #main,
.tag-template #main
{
    margin: 2rem auto;
}

#main
{
    position: relative;
    z-index: 1;

    width: 74%;
    max-width: 86rem;
    margin: 0rem auto;
}

.post-in-list
{
    position: relative;

    overflow: hidden;

    min-height: 10rem;
    margin-bottom: 2rem;

    -webkit-transform: translate3d(0, 0, 0);
}

.post-in-list a
{
    color: #fff;
}

.post-in-list p
{
    margin: 0;
}

.post-in-list .post-excerpt img
{
    font-size: 0; 

    display: block;

    width: 100%;
    height: auto;
    min-height: 20rem;

    border: 0 none;
}
.post-in-list .post-excerpt img.loading
{
    visibility: hidden; 

    background: #efefef;
}

.post-excerpt
{
    display: block;

    background: #333;
    background: rgba(29, 29, 29, .8);
}

.info-mask
{
    position: absolute;
    bottom: 0;

    display: block;

    width: 100%;

    background: linear-gradient(transparent, #111);
}
.info-mask .post-meta
{
    padding: 0 2rem 1rem 0rem;
}

.post-excerpt-mirror
{
    position: relative;
    z-index: 100;
}
.post-excerpt-mirror a
{
    display: block;
    overflow: hidden;
    overflow: hidden; 

    width: 100%;

    white-space: nowrap;
    text-overflow: ellipsis;
}
.post-excerpt-mirror img
{
    font-size: 0;

    z-index: 1;

    display: block;

    width: 100%;
    height: auto;
    min-height: 20rem;
    max-height: 50rem; 

    -webkit-transform: scaleY(-1);
       -moz-transform: scaleY(-1);
        -ms-transform: scaleY(-1);
         -o-transform: scaleY(-1);
            transform: scaleY(-1);

    border: 0 none;
}

.post-short-intro
{
    font-family: 'Exo', '-apple-system', 'Open Sans', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 'Hiragino Sans GB', 'Microsoft YaHei', Helvetica, Arial, sans-serif; 
    font-size: 1.2rem;
    line-height: 1.8rem;

    overflow: hidden;
    overflow: hidden;

    max-height: 3.6rem;

    white-space: normal;
    text-overflow: ellipsis;

    color: #fff;
}

.post-excerpt-mirror-mask
{
    position: relative;
    z-index: 2; 

    display: none;

    width: 100%;
}
.post-excerpt-mirror-mask:after
{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    content: '';

    opacity: .88; 
    background: #060505;
}
.post-excerpt-mirror-mask .mask-wrapper
{
    position: relative; 
    z-index: 1024;
}
.post-excerpt-mirror-mask img.loading
{
    visibility: hidden;
}
.post-excerpt-mirror-mask img.lazy
{
    display: block;
}

.excert-detail-container
{
    position: absolute;
    z-index: 1024;
    top: 1rem;
    left: 50%;

    width: 90%;
    margin-left: -45%; 
    padding: 1.5rem 0rem;
}

a.btn-post-excerpt
{
    font-family: 'Exo';
    font-size: 1.4rem;
    line-height: 2rem;

    display: inline-block;
    float: left;

    width: auto;
    height: 2rem;
    margin-top: 3rem; 
    padding: .5rem 1rem;

    text-align: center;

    border: 1px solid #fff;
}

.mask-wrapper
{
    padding: 0 1.2rem;
}

.post-title
{
    font-family: 'Exo', sans-serif;
    font-size: 3.6rem;

    overflow: hidden;
    overflow: hidden; 

    margin: 1.2rem 0;

    white-space: nowrap;
    text-overflow: ellipsis;

    color: #fff;
}
.post-title a
{
    font-family: '-apple-system', 'Open Sans', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 'Hiragino Sans GB', 'Microsoft YaHei', Helvetica, Arial, sans-serif, sans-serif;
    line-height: 3.6rem;
}

.post-meta span
{
    font-family: 'Exo'; 
    font-size: 1.6rem;

    display: inline-block;

    color: #fff;
}

.post-tags
{
    margin-left: .5rem;
}

.post-tags a
{
    font-size: 1.4rem;
    line-height: 1.6rem;

    display: inline-block;

    margin-left: .6rem;
    padding: 0rem 1rem;

    border-radius: .3rem; 
    background: rgba(255, 255, 255, .3);
}

.post-tags a:hover
{
    background: rgba(255, 255, 255, .2);
}

#footer .svg-wrapper
{
    top: 0; 
    bottom: auto;
}

.decor
{
    position: absolute;
    z-index: 2;
    bottom: -1px; 
    left: 0;

    width: 100%;
    height: 100%;
}

#footer .decor
{
    top: -1px;
}

.pagination
{
    width: 70%; 
    margin: 0 auto;
    margin-top: 2rem;
    margin-bottom: 3rem;

    text-align: center;

    color: #999;
}
.pagination a
{
    font-family: 'Exo' '-apple-system', 'Open Sans', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 'Hiragino Sans GB', 'Microsoft YaHei', Helvetica, Arial, sans-serif;
    font-size: 1.4rem;
    line-height: 2.4rem;

    display: inline-block;

    height: 2.4rem;
    padding: .3rem .8rem; 

    text-align: center;

    color: #fff;
    border-radius: .3rem;
    background: rgba(59, 59, 59, .7);
}
.pagination a:hover
{
    background: rgba(0, 0, 0, .5);
}

.page-number
{
    font-size: 1.4rem;

    display: inline-block;

    padding: 0 1rem;
}

.single-post-inner
{
    font-family: 'Exo', '-apple-system', 'Open Sans', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 'Hiragino Sans GB', 'Microsoft YaHei', Helvetica, Arial, sans-serif; 
    font-size: 1.8rem;

    overflow: hidden;

    padding: 0rem 2.8% .8rem;

    border-bottom: 1px dashed #e5e5e5;
}
.single-post-inner img
{
    display: block;

    max-width: 100%;
    height: auto;
    margin: 0 auto;

    text-indent: -9999px;
}
.single-post-inner img.full-img
{
    width: 106%;
    max-width: none;
    margin: 0 -3%;
}
.single-post-inner .loading
{
    opacity: .3;
}
.single-post-inner .lazy
{
    display: block;
}
.single-post-inner .lazy.full-img
{
    visibility: visible; 

    height: auto;
}
.single-post-inner img[alt='cover']
{
    display: none !important;
}
.single-post-inner img[alt='full']
{
    width: 106%;
    max-width: none;
    margin: 0 -3%;
}
.single-post-inner img[src='']
{
    display: none;
}
.single-post-inner a
{
    font-family: 'Exo', '-apple-system', 'Open Sans', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 'Hiragino Sans GB', 'Microsoft YaHei', Helvetica, Arial, sans-serif;
    font-size: 1.6rem;
    line-height: 2.8rem;

    padding: 0 .5rem;

    vertical-align: top; 

    color: #54b5db;
}
.single-post-inner a .iconfont
{
    line-height: 2.8rem;

    padding-right: .3rem;

    vertical-align: baseline;
}
.single-post-inner p
{
    font-family: 'Exo', '-apple-system', 'Open Sans', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 'Hiragino Sans GB', 'Microsoft YaHei', Helvetica, Arial, sans-serif; 
    font-size: 1.6rem;
    line-height: 2.8rem;

    margin-top: 2.2rem;

    color: #333;
}
.single-post-inner p.with-img
{
    margin: 0;
    padding: 0;

    -webkit-transition: padding .15s linear;
            transition: padding .15s linear;
}
.single-post-inner h1,
.single-post-inner h2,
.single-post-inner h3,
.single-post-inner h4,
.single-post-inner h5,
.single-post-inner h6,
.single-post-inner pre,
.single-post-inner code
{
    color: #595959;
}
.single-post-inner h2,
.single-post-inner h3,
.single-post-inner h4,
.single-post-inner h6
{
    position: relative;

    margin-top: .5rem;

    text-indent: 1.2em;
}
.single-post-inner h2:before,
.single-post-inner h3:before,
.single-post-inner h4:before,
.single-post-inner h6:before
{
    position: absolute;
    left: -1em;

    display: block;

    content: '#';

    color: #f72d84;
}
.single-post-inner ul
{
    margin: 1.5rem 0;
}
.single-post-inner li
{
    font-size: 1.6rem;
    line-height: 2.4rem;
}
.single-post-inner li p
{
    margin: .3rem;
}
.single-post-inner blockquote
{
    font-size: 1.6rem;
    font-style: italic;
    line-height: 2.2rem;

    padding-left: 1rem; 

    color: #333;
    border-left: 3px solid #efefef;
}
.single-post-inner hr
{
    border: 1px solid #efefef;
}
.single-post-inner iframe,
.single-post-inner frame,
.single-post-inner video
{
    max-width: 100%;
    height: auto;
}
.single-post-inner pre
{
    white-space: pre-wrap;
}
.single-post-inner pre code
{
    line-height: 2rem; 

    border: 0 none;
    background: none;
}

.tag-box a
{
    font-size: 1.4rem;
    line-height: 2rem; 

    display: inline-block;

    height: 2rem;
    margin-right: .4rem;
    padding: .1rem .5rem;

    text-align: center;

    color: #fff;
    border-radius: .2rem;
    background: #939ba6;
    background: rgba(37, 54, 74, .5);
}
.tag-box a:hover,
.tag-box a:active
{
    background: #677081;
    background: rgba(37, 54, 74, .7);
}
.tag-box a .iconfont
{
    display: none;
}

.money-like
{
    padding: 2rem 0 3rem;
}
.money-like .money-notice
{
    font-size: 1.2rem;
    font-style: italic;
    line-height: 1.4rem;

    margin: 1rem auto; 

    text-align: center;

    color: #595959;
}
.money-like .reward-button
{
    font-size: 2.4rem;
    line-height: 4.6rem;

    position: relative;

    display: block;

    width: 4.6rem;
    height: 4.6rem;
    margin: 0 auto;
    margin: 0 auto;
    padding: 0;

    -webkit-user-select: none; 
    text-align: center;
    vertical-align: middle;

    color: #fff;
    border: 1px solid #f1b60e;
    border-radius: 50%;
    background: #fccd60;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fccd60), color-stop(100%, #fbae12), color-stop(100%, #2989d8), color-stop(100%, #207cca));
    background: -webkit-linear-gradient(top, #fccd60 0%, #fbae12 100%, #2989d8 100%, #207cca 100%);
    background:         linear-gradient(to bottom, #fccd60 0%, #fbae12 100%, #2989d8 100%, #207cca 100%);
}
.money-like .money-code
{
    position: absolute;
    top: -16rem;
    left: 50%;

    display: none;

    width: 22rem;
    height: 10rem;
    margin-left: -12.2rem;
    padding: 1.2rem 1.2rem 3rem;

    border: 1px solid #e6e6e6;
    background: #fff;
    box-shadow: 0 1px 1px 1px #efefef;
}
.money-like .money-code span
{
    display: inline-block;

    width: 10rem;
    height: 12rem;
}
.money-like .money-code span.alipay-code
{
    float: left;
}
.money-like .money-code span.alipay-code a
{
    padding: 0;
}
.money-like .money-code span.wechat-code
{
    float: right;
}
.money-like .money-code img
{
    display: inline-block;
    float: left;

    width: 10rem;
    height: 10rem;
    margin: 0rem auto;

    border: 0 none;
}
.money-like .money-code b
{
    font-size: 1.2rem;
    line-height: 2.6rem;

    display: block;

    margin: 0;

    text-align: center;

    color: #666;
}
.money-like .money-code b.notice
{
    line-height: 2rem;

    margin-top: -1rem; 

    color: #999;
}
.money-like .money-code:after,
.money-like .money-code:before
{
    position: absolute;

    content: '';

    border: 10px solid transparent;
}
.money-like .money-code:after
{
    bottom: -19px; 
    left: 50%;

    margin-left: -10px;

    border-top-color: #fff;
}
.money-like .money-code:before
{
    bottom: -20px; 
    left: 50%;

    margin-left: -10px;

    border-top-color: #e6e6e6;
}

.qr-code img
{
    display: block;

    width: 13rem;
    height: 13rem;

    box-shadow: 0 0 1px #e3e3e3;
}
.qr-code img:hover,
.qr-code img:active
{
    background: #e6e6e6;
    box-shadow: 0 0 5px #e3e3e3;
}

.qr-code p
{
    font-size: 1.2rem;
    font-style: italic;
    line-height: 1.4rem;

    display: block;

    margin-top: .6rem; 

    text-align: center;

    color: #999;
}

.nav-header
{
    position: relative; 

    width: 100%;
}

.nav-header-container
{
    position: relative;

    width: 74%;
    max-width: 76.8rem;
    height: 2rem;
    margin: 0 auto;
}

.header-wrap
{
    width: 100%;
}

.home-logo
{
    font-family: 'Exo', '-apple-system', 'Open Sans', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 'Hiragino Sans GB', 'Microsoft YaHei', Helvetica, Arial, sans-serif; 
    font-size: 2.2rem;
    font-weight: bold;
    line-height: 4rem;

    position: absolute;
    z-index: 99;
    top: 2rem;
    left: 0;

    width: 4rem;
    height: 4rem;

    text-transform: uppercase;

    opacity: .7;
    color: #fff;
    border-radius: 0;
    border-radius: .1rem;
    background: #000;
}

.back-home
{
    font-size: 1.2rem;
    line-height: 2.4rem;

    position: absolute;
    z-index: 99; 
    top: 2rem;
    left: 0;

    padding: .5rem 2.5rem;

    text-transform: uppercase;

    opacity: .8;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 0;
    background: none repeat scroll 0 0 transparent;
}
.back-home:active
{
    background: rgba(0, 0, 0, .1);
}

.svg-logo
{
    position: absolute;
    top: 2rem; 
    left: 0;
}

#svg-luolei
{
    fill: #333;
}
#svg-luolei:hover,
#svg-luolei:active
{
    opacity: .4; 

    fill: #999;
}

.home-info-container
{
    margin-top: 16rem;
}
.home-info-container h2,
.home-info-container h4
{
    font-family: 'Exo', '-apple-system', 'Open Sans', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 'Hiragino Sans GB', 'Microsoft YaHei', Helvetica, Arial, sans-serif;
    font-weight: lighter;

    color: #fff;
    text-shadow: 0 1px 1px #595959;
}
.home-info-container h2:hover,
.home-info-container h4:hover
{
    color: #efefef;
    text-shadow: 0 1px 1px #000;
}
.home-info-container h2
{
    font-size: 4.2rem;
}
.home-info-container h4
{
    font-size: 2rem;

    letter-spacing: .8rem;
}

.post-info-container
{
    width: 74%;
    max-width: 76.8rem;
    margin: 13rem auto;
}

.post-page-tags
{
    display: block;
    clear: both;

    margin-top: 1rem; 

    text-align: left;
}
.post-page-tags a
{
    font-size: 1.4rem;
    line-height: 1.6rem;

    display: inline-block;

    margin: .3rem .6rem .3rem 0;
    padding: 0rem 1rem;

    color: #fff;
    border-radius: .3rem; 
    background: rgba(255, 255, 255, .3);
}
.post-page-tags a:first-child
{
    margin-left: 0;
}
.post-page-tags a:hover
{
    background: rgba(255, 255, 255, .2);
}

.post-page-time
{
    font-family: 'Exo', '-apple-system', 'Open Sans', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 'Hiragino Sans GB', 'Microsoft YaHei', Helvetica, Arial, sans-serif;
    font-size: 1.6rem;
    line-height: 2rem;

    display: inline-block;
    float: left;

    height: 2rem;

    text-align: left;

    color: #efefef;
}

.post-page-author
{
    font-family: '-apple-system', 'Open Sans', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 'Hiragino Sans GB', 'Microsoft YaHei', Helvetica, Arial, sans-serif;
    font-size: 1.4rem;
    line-height: 2rem;

    display: inline-block;
    float: left;

    height: 2rem;
    margin-left: 2rem; 

    text-align: left;

    color: #fff;
}

.post-page-title
{
    font-family: 'Exo' '-apple-system', 'Open Sans', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 'Hiragino Sans GB', 'Microsoft YaHei', Helvetica, Arial, sans-serif;
    font-size: 4.2rem;
    font-weight: lighter;
    line-height: 4.8rem;

    display: -webkit-box;
    overflow: hidden;

    min-height: 9.4rem;
    margin: 0 auto;

    text-align: left;
    white-space: normal;
    text-overflow: ellipsis;
    text-overflow: ellipsis;

    color: #fff;

    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.share
{
    width: 100%;
    margin: 2rem auto; 

    text-align: center;
}
.share h4
{
    display: block;

    width: 10rem;
    margin: 0 auto; 
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    padding: .5rem 1.6rem;

    text-align: center;
    letter-spacing: .5rem;

    border: 2px solid #595959;
    border-radius: .3rem;
    background: rgba(255, 255, 255, .1);
}

.share-icons
{
    margin: 1.5rem auto 3rem; 

    text-align: center;
}
.share-icons a
{
    font-size: 2rem;
    line-height: 2.5rem; 

    display: inline-block;
}
.share-icons a i
{
    font-size: 4.8rem;

    margin: 0 1rem;
}

#to-top
{
    position: fixed;
    z-index: 1000; 
    right: 20px;
    bottom: 20px;

    display: none;
    overflow: hidden;

    width: 48px;
    height: 48px;

    text-align: left;
    text-indent: -9999px;

           opacity: .5;
    border-radius: 5%;
    background: rgba(0, 0, 0, .6);

    -khtml-opacity: .5;
    filter: alpha(opacity=50);
}
#to-top:hover,
#to-top:active
{
    background: rgba(0, 0, 0, .4);
}

.to-top-wrap
{
    position: relative; 

    width: 100%;
    height: 100%;
}
.to-top-wrap:after
{
    position: absolute;
    top: 50%;
    left: 50%;

    display: block;

    width: 0;
    height: 0;
    margin-top: -11px;
    margin-left: -10px;

    content: '';
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
    -webkit-animation-name: shine;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite; 

    border-top: 10px solid rgba(255, 255, 255, .5);
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
}
.to-top-wrap:before
{
    position: absolute;
    top: 50%;
    left: 50%;

    display: block;

    width: 0;
    height: 0;
    margin-top: -12px;
    margin-left: -15px;

    content: '';
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
    -webkit-animation-name: shine;
    -webkit-animation-duration: 3s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite; 

    border-top: 20px solid rgba(255, 255, 255, .5);
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
}

.author
{
    font-family: 'Open Sans', sans-serif; 

    position: relative;

    width: 100%;
    margin-top: 5rem;

    background: #fff;
}

.author-image
{
    position: absolute;
    z-index: 2;
    top: -40px;
    left: 50%;

    display: block;
    overflow: hidden;

    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: 80px;
    height: 80px;
    margin-left: -40px;
    padding: 6px;

    border-radius: 100%;
    background: #fff;
    box-shadow: #e7eef2 0 0 0 1px;
}
.author-image .img
{
    position: relative;

    display: block;

    width: 100%;
    height: 100%;

    border-radius: 100%; 
    background-position: center center;
    background-size: cover;
}

.author-detail
{
    padding: 6.6rem 1.6rem 1.6rem;

    text-align: center;
}
.author-detail a
{
    font-size: 1.6rem;

    color: #999;
}
.author-detail a:hover
{
    color: #666;
}
.author-detail p
{
    font-size: 1.4rem;
    line-height: 1.75em; 

    margin: 1rem 0;

    color: #333;
}

.author-meta
{
    font-size: 1.4rem;
    font-style: italic;
    line-height: 1;

    display: inline-block;

    margin: 0;
    margin: 0 auto;
    padding: 0;

    list-style: none;

    word-wrap: break-word; 

    color: #9eabb3;
}
.author-meta span
{
    font-family: 'Exo', '-apple-system', 'Open Sans', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 'Hiragino Sans GB', 'Microsoft YaHei', Helvetica, Arial, sans-serif; 

    margin-right: 1rem;

    color: #9eabb3;
}
.author-meta span a
{
    color: #9eabb3;
}

.cover-image
{
    display: none !important;
}

.comment-area
{
    padding: 0 1.6rem; 

    background: #fff;
}
.comment-area h4
{
    font-family: '-apple-system', 'Open Sans', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 'Hiragino Sans GB', 'Microsoft YaHei', Helvetica, Arial, sans-serif; 
    font-style: italic;

    display: block;

    width: 10rem;
    margin: 0 auto;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    padding: .5rem 1.6rem;

    text-align: center;
    letter-spacing: .5rem;

    color: #333;
    border-radius: .3rem;
    background: rgba(255, 255, 255, .1);
}

.comment-area.toggle-up
{
    display: block;

    -webkit-animation-name: toggle-up;
    -webkit-animation-duration: .5s;
    -webkit-animation-timing-function: linear;
}

@-webkit-keyframes animate-bg
{
    from
    {
        background-position: 0 0;
    }
    to
    {
        background-position: 283px 212px;
    }
}

@-webkit-keyframes shine
{
    0%
    {
        opacity: .1;
    }
    25%
    {
        opacity: .2;
    }
    50%
    {
        opacity: 1;
    }
    75%
    {
        opacity: .2;
    }
    100%
    {
        opacity: .1;
    }
}

@-webkit-keyframes toggle-up
{
    0%
    {
        -webkit-transform: translate3d(0, 100px, 0);
                transform: translate3d(0, 100px, 0); 

        opacity: 0;
    }
    100%
    {
        -webkit-transform: none;
                transform: none; 

        opacity: 1;
    }
}

/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license - http://opensource.org/licenses/MIT

Copyright (c) 2014 Daniel Eden
*/
.animated
{
    -webkit-animation-duration: 1s;
            animation-duration: 1s;

    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
}

.animated.infinite
{
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
}

.animated.hinge
{
    -webkit-animation-duration: 2s;
            animation-duration: 2s;
}

@-webkit-keyframes fadeInUpBig
{
    0%
    {
        -webkit-transform: translate3d(0, 2000px, 0);
                transform: translate3d(0, 2000px, 0); 

        opacity: 0;
    }
    100%
    {
        -webkit-transform: none;
                transform: none; 

        opacity: 1;
    }
}

@keyframes fadeInUpBig
{
    0%
    {
        -webkit-transform: translate3d(0, 2000px, 0);
                transform: translate3d(0, 2000px, 0); 

        opacity: 0;
    }
    100%
    {
        -webkit-transform: none;
                transform: none; 

        opacity: 1;
    }
}

.fadeInUpBig
{
    -webkit-animation-name: fadeInUpBig;
            animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeOut
{
    0%
    {
        opacity: 1;
    }
    100%
    {
        opacity: 0;
    }
}

@keyframes fadeOut
{
    0%
    {
        opacity: 1;
    }
    100%
    {
        opacity: 0;
    }
}

@-webkit-keyframes fadeIn
{
    0%
    {
        opacity: 0;
    }
    100%
    {
        opacity: 1;
    }
}

@keyframes fadeIn
{
    0%
    {
        opacity: 0;
    }
    100%
    {
        opacity: 1;
    }
}

.fadeIn
{
    -webkit-animation-name: fadeIn;
            animation-name: fadeIn;
}

/* ==========================================================================
   7. Read More - Next/Prev Post Links
   ========================================================================== */
.read-next
{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    max-width: 86rem;
    margin: 5rem auto; 
    margin-top: 5rem;

    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
            align-items: stretch;
}

.read-next-story
{
    position: relative;
    position: relative; 

    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
    overflow: hidden;

    min-width: 50%;

    text-align: center;
    text-decoration: none;

    color: #fff;
    background: #222 no-repeat center center;
    background-size: cover;

    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
            flex-grow: 1;
}
.read-next-story:after
{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    content: '';

    opacity: .1; 
    background: #060505;
}

.read-next-story:hover:before
{
    transition: all .2s ease; 

    background: rgba(0, 0, 0, .5);
}

.read-next-story:hover .post:before
{
    transition: all .2s ease; 

    color: #222;
    background: #fff;
}

.read-next-story:before
{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    display: block;

    content: '';
    transition: all .5s ease;
}

.read-next-story .post
{
    padding: 4rem 3rem; 

    background: transparent;
}

.read-next-story h2
{
    position: relative; 
    z-index: 100;

    margin-top: 1rem;

    color: #fff;
}

.read-next-story p
{
    font-size: 1.4rem;

    position: relative; 
    z-index: 100;

    margin: 0;
    padding: 0 10rem;

    color: rgba(255, 255, 255, .8);
}

/* Special styles for posts with no cover images */
.read-next-story.no-cover
{
    background: #f5f8fa;
}

.read-next-story.no-cover:before
{
    display: none;
}

.read-next-story.no-cover .post:before
{
    color: rgba(0, 0, 0, .5);
    border-color: rgba(0, 0, 0, .2);
}

.read-next-story.no-cover h2
{
    color: rgba(0, 0, 0, .8);
}

.read-next-story.no-cover p
{
    color: rgba(0, 0, 0, .5);
}

/* if there are two posts without covers, put a border between them */
.read-next-story.no-cover + .read-next-story.no-cover
{
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box; 

    border-left: rgba(0, 0, 100, .04) 1px solid;
}

/* 载入iconfont字体 */
.iconfont
{
    font-family: 'iconfont' !important;
    font-size: 16px;
    font-style: normal;

    display: inline-block;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    speak: none;
}

.iconfont
{
    vertical-align: middle;
}
.iconfont:hover
{
    opacity: .6;
    color: #363636;
}

.iconfont.undefined
{
    display: none !important;
}

.iconfont-self
{
    color: red;
}

.iconfont-weibo
{
    color: #e6162d;
}

.iconfont-twitter
{
    color: #2aa9e0;
}

.iconfont-facebook
{
    color: #204385;
}

.iconfont-google
{
    color: #176dee;
}

.iconfont-wikipedia
{
    color: #626262;
}

.iconfont-weixin
{
    color: #75d140;
}

.iconfont-qzone
{
    color: #186cc6;
}

.iconfont-github
{
    color: #333;
}

.iconfont-douban
{
    color: #279337;
}

.iconfont-luolei
{
    color: #6596c1;
}

.iconfont-dribble
{
    color: #f72d84;
}

.iconfont-zhihu
{
    color: #0767c8;
}

.iconfont-instagram
{
    color: #9b6954;
}

.iconfont-v2ex
{
    color: #1a1a1b;
}

.icon-weibo-pure
{
    color: #e6162d;
}

.icon-twitter-pure
{
    color: #2aa9e0;
}

.icon-github-pure
{
    color: #333;
}

.icon-dribble-pure
{
    color: #f72d84;
}

.icon-weixin-pure
{
    color: #75d140;
}

.iconfont-jianshu
{
    color: #e78170;
}

.iconfont-youku
{
    color: #06a7e1;
}

.iconfont-youtube
{
    color: #e52413;
}

/* 自定义IconFont CSS 才用:before的形式 */
.single-post-inner .iconfont-local:before
{
    content: '\0f00ac';
}

.single-post-inner .iconfont-twitter:before
{
    content: '\00e604';
}

.single-post-inner .iconfont-wechat:before
{
    content: '\00e606';
}

.single-post-inner .iconfont-weibo:before
{
    content: '\00e607';
}

.single-post-inner .iconfont-facebook:before
{
    content: '\00e601';
}

.single-post-inner .iconfont-google:before
{
    content: '\00e602';
}

.single-post-inner .iconfont-github:before
{
    content: '\00e60d';
}

.single-post-inner .iconfont-douban:before
{
    content: '\0e600';
}

.single-post-inner .iconfont-luolei:before
{
    content: '\0';
}

.single-post-inner .iconfont-v2ex:before
{
    content: '\00e605';
}

.single-post-inner .iconfont-zhihu:before
{
    content: '\00e609';
}

.single-post-inner .iconfont-wikipedia:before
{
    content: '\00e608';
}

.single-post-inner .iconfont-jianshu:before
{
    content: '\00e60b';
}

.single-post-inner .iconfont-youku:before
{
    content: '\00e60c';
}

.single-post-inner .iconfont-youtube:before
{
    content: '\00e60a';
}

.single-post-inner .iconfont-luolei:before
{
    content: '\00e60e';
}

.yasuko-only #ds-reset .ds-avatar img
{
    width: 54px;
    height: 54px;

    -webkit-transition: .3s;
    -webkit-transition: -webkit-transform .4s ease-out;
            transition:         transform .4s ease-out; 

    border-radius: 50%;
    box-shadow: 0;
}

.yasuko-only #ds-reset .ds-avatar img:hover
{
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg); 

    -webkit-box-shadow: 0 0 10px #fff;
            box-shadow: 0 0 10px #fff;
}

.yasuko-only #ds-thread #ds-reset .ds-textarea-wrapper
{
    border: 1px solid #efefef;
    border-bottom: 0; 
    background: #fff;
}

.yasuko-only #ds-reset .ds-rounded-top
{
    border-radius: 0;
}

.yasuko-only #ds-reset .ds-gradient-bg
{
    background: #fff;
}

.yasuko-only #ds-thread #ds-reset .ds-post-options
{
    position: relative;

    height: 30px;
    margin-right: 100px;

    border: 1px solid #efefef;
    border-right: none;
}

.yasuko-only #ds-thread #ds-reset .ds-post-button
{
    color: #fff;
    border: 0 none;
    border-radius: 0; 
    background: #00bcd4;
}

.yasuko-only #ds-thread #ds-reset .ds-post-button:hover
{
    color: #fff; 
    background: #04aac2;
}

.yasuko-only #ds-thread #ds-reset .ds-post-toolbar
{
    box-shadow: 0;
}

.yasuko-only #ds-thread #ds-reset li.ds-tab a.ds-current
{
    border: 0;
    background-color: rgba(0, 0, 0, .06);
}

.yasuko-only #ds-reset .ds-rounded-top
{
    border-radius: 0;
}

.yasuko-only #ds-thread #ds-reset .ds-post-button
{
    text-shadow: none;
}

.yasuko-only #ds-wrapper #ds-reset .ds-dialog-inner
{
    background: #fff;
    box-shadow: 0;
    text-shadow: 0;
}

@media only screen and (min-width: 1024px)
{
    #main
    {
        width: 100%;
    }
}

@media only screen and (max-width: 768px)
{
    #main
    {
        width: 100%;
        margin: 2rem auto;
    }
    .post-template .site-footer
    {
        margin-top: 3rem;
    }
    .home-template .site-footer
    {
        margin-top: 3rem;
    }
    .arrow_down
    {
        display: block;
    }
    .back-home
    {
        top: .5rem;
        left: 0;
    }
    #header
    {
        max-height: 100%;
    }
    .home-info-container
    {
        max-width: 80%;
        margin: 16rem auto;
    }
    .read-next-story .post
    {
        padding: 6rem 3rem;
    }
    .read-next
    {
                flex-direction: column;

        margin-top: 4rem; 

        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
            -ms-flex-direction: column;
    }
    .read-next-story h2
    {
        font-size: 2.4rem;
        line-height: 3.2rem;

        display: -webkit-box;
        overflow: hidden;

        white-space: normal;
        text-overflow: ellipsis;
        text-overflow: ellipsis;

        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .read-next p
    {
        padding: 0 1rem;
    }
    .read-next-story.no-cover + .read-next-story.no-cover
    {
        border-top: rgba(0, 0, 100, .06) 1px solid;
        border-left: none;
    }
    .wechat-webview .qr-code
    {
        display: none;
    }
    .wechat-webview .money-like
    {
        padding: 3rem 0;
    }
    .wechat-webview .money-code
    {
        top: -19rem; 

        width: 14rem;
        height: 13rem;
        margin-left: -8.2rem;
    }
    .wechat-webview .money-code span
    {
        width: auto;
        height: auto;
    }
    .wechat-webview .money-code span.wechat-code
    {
        float: none;
    }
    .wechat-webview .money-code img
    {
        display: block;

        width: 13.5rem;
        height: 13.5rem;
    }
    .wechat-webview .money-code b
    {
        font-size: 1.2rem;
    }
    .wechat-webview .alipay-code
    {
        display: none !important;
    }
}

@media only screen and (max-width: 481px)
{
    #header
    {
        height: 60%;
        max-height: 100%;
    }
    .home-template #main
    {
        margin: 0rem auto;
    }
    .home-template #header
    {
        height: 60%;
    }
    .archive-template #main
    {
        margin: 0 auto;
    }
    .post-info-container
    {
        width: 84%;
        margin: 3rem auto 2rem;
        padding: 2rem 0;
    }
    .header-wrap
    {
        width: 94%;
        margin: 0 auto;
    }
    .post-in-list
    {
        margin-bottom: 0rem;
    }
    .info-mask
    {
        height: 6rem;
    }
    .post-title
    {
        line-height: 2.2rem; 

        margin: .2rem 0;
    }
    .mask-wrapper
    {
        margin-top: .5rem;
    }
    #main
    {
        width: 100%;
        margin: 0rem auto;
    }
    .post-page-title
    {
        font-size: 2.4rem;
        line-height: 2.8rem;

        min-height: 4.8rem;
        margin-bottom: 1rem;
    }
    .author-detail
    {
        padding: 6rem 1.6rem 1.6rem;
    }
    .post-excerpt-mirror-mask
    {
        display: block;
    }
    .post-excerpt p
    {
        display: block;
        overflow: hidden;
    }
    .post-excerpt-mirror p
    {
        display: block;
        overflow: hidden;

        height: 20rem;
    }
    .post-excerpt-mirror a
    {
        font-family: '-apple-system', 'Open Sans', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 'Hiragino Sans GB', 'Microsoft YaHei', Helvetica, Arial, sans-serif; 
        font-size: 2rem;
    }
    .post-excerpt-mirror a.btn-post-excerpt
    {
        font-size: 1.4rem;
        line-height: 1.8rem;

        margin-top: 1.5rem;
    }
    .post-excerpt-mirror .post-short-intro
    {
        font-family: 'HelveticaNeue-UltraLight', 'Helvetica Neue UltraLight'; 
        font-size: 1.4rem;
        line-height: 2rem;

        max-height: 4rem;
    }
    .excert-detail-container
    {
        width: 80%;
        max-width: 80%;
        margin-left: -40%;
    }
    .home-info-container
    {
        margin-top: 6rem;
    }
    .home-info-container h2,
    .home-info-container h4
    {
        font-weight: lighter;

        color: #fff;
        text-shadow: 0 1px 1px #595959;
    }
    .home-info-container h2:hover,
    .home-info-container h4:hover
    {
        text-shadow: 0 1px 1px #333;
    }
    .home-info-container h2
    {
        font-size: 3.2rem;
    }
    .home-info-container h4
    {
        font-size: 1.4rem;

        letter-spacing: .5rem;
    }
    .back-home
    {
        top: .2rem;
    }
    .arrow_down
    {
        bottom: 3rem;
    }
    .pagination
    {
        width: 90%;
    }
    .pagination a
    {
        font-size: 1rem;
    }
    .archive-template #main,
    .tag-template #main
    {
        margin: 0 auto;
    }
    .archive-template #header,
    .tag-template #header
    {
        height: 45%;
    }
    .archive-template .home-info-container,
    .tag-template .home-info-container
    {
        margin-top: 10rem;
    }
    .archive-template .home-info-container h2,
    .tag-template .home-info-container h2
    {
        font-size: 3.2rem;
    }
    .archive-template .home-info-container h4,
    .tag-template .home-info-container h4
    {
        font-size: 1.8rem;
    }
    .tag-template .home-info-container h4
    {
        -webkit-animation-name: shine;
        -webkit-animation-duration: 3.5s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
    }
    .info-mask
    {
        display: none;
    }
    .post-meta span.post-tags
    {
        display: none;
    }
    .post-meta span.post-tags a
    {
        width: auto;
        margin-left: 0;
    }
    .site-footer
    {
        margin-top: 3rem;
    }
    .home-logo,
    .svg-logo
    {
        top: 0rem; 

        opacity: .8;
    }
    .share-icons a i
    {
        font-size: 4.2rem;

        margin: 0 .8rem;
    }
    .tag-box a
    {
        font-size: 1.2rem;
        line-height: 1.8rem; 

        height: 1.8rem;
        margin-right: .4rem;
        padding: 0rem .3rem;

        text-align: center;

        color: #fff;
        border-radius: .2rem;
        background: rgba(37, 54, 74, .5);
    }
    .nav-header-container
    {
        width: 80%;
    }
    .read-next
    {
        margin: 5rem auto 2rem;
    }
    .read-next-story .post
    {
        padding: 5rem 3rem; 

        background: transparent;
    }
}

@media only screen and (max-width: 361px)
{
    .site-footer
    {
        font-size: 1.2rem; 

        margin-top: 3rem;
    }
    #main
    {
        width: 100%;
        margin: 2rem auto;
    }
    .nav-header-container
    {
        width: 80%;
    }
    .back-home
    {
        top: .5rem;
        left: 0;
    }
}
